import React, { Component } from "react";

export default class Event extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 100,
    };
    this.add5 = this.add5.bind(this);//提前指明函数里面的this指向
  }
  add = () => {
    //普通调用  不带参数
    this.setState({
      num: this.state.num + 1,
    });
  };
  add1 = (num) => {
    //普通调用  不带参数
    this.setState({
      num: this.state.num + num,
    });
  };
  add2 = (num, e) => {
      console.log(e.target);
    //普通调用  不带参数
    this.setState({
      num: this.state.num + num,
    });
    e.target.style.color = "red";
  };
  add3 = (num, e) => {
    //普通调用  不带参数
    this.setState({
      num: this.state.num + num,
    });
    e.target.style.color = "red";
  };

  add4() {
    //    console.log(this);
    this.setState({
      num: this.state.num + 1,
    });
  }

  add5(){
    //    console.log(this);
        this.setState({
            num:this.state.num+1
        })
  }

  render() {
    return (
      <div>
        事件绑定
        <div>
          <h3>{this.state.num}</h3>
          <button
            onClick={() => {
              this.add();
            }}
          >
            修改
          </button>
          <button onClick={this.add}>修改</button>
        </div>
        <br />
        <div>
          <h3>{this.state.num}</h3>
          <button
            onClick={() => {
              this.add1(100);
            }}
          >
            修改
          </button>
          <button onClick={this.add1.bind(this, 200)}>修改</button>
        </div>
        <div>
          <h3>{this.state.num}</h3>
          <button
            onClick={(e) => {
              this.add2(100, e);
            }}
          >
            修改
          </button>
          <button onClick={this.add3.bind(this, 200)}>修改</button>
        </div>
        <br />
        <div>
          <button
            onClick={() => {
              this.add4();
            }}
          >
            普通函数
          </button>
          <button onClick={this.add4.bind(this)}>普通函数</button>

          <button onClick={this.add5}>普通函数</button>
        </div>
      </div>
    );
  }
}
